<template>
  <el-popover
    placement="right"
    width="360"
    trigger="click"
    @show="show"
  >
    <div id="user---info">
      <el-card
        shadow="never"
        v-if="user"
      >
        <div
          slot="header"
        >
          <span>{{ user.userName }}</span>
        </div>
        <div class="f">
          <p><span>电话：</span> {{ user.phone }}</p>
          <p><span>信息：</span> {{ user.describeText }}</p>
        </div>
      </el-card>
    </div>
    <el-link
      slot="reference"
      v-if="!tag"
    >
      {{ name || "---" }}
    </el-link>
    <el-tag
      slot="reference"
      v-if="tag"
      size="mini"
      type="danger"
    >
      {{ name || "---" }}
    </el-tag>
  </el-popover>
</template>

<script>
  export default {
    name: 'UserInfo',
    props: {
      id: {
        type: Number,
        default: 0
      },
      name: {
        type: String,
        default: ''
      },
      tag: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        user: null,
        init: false
      }
    },
    methods: {
      async show () {
        if (this.init) return
        const { data } = await this.$service.gzl.getUser(this.id)
        this.user = data.data
        this.init = true
      }
    }
  }
</script>
<style>
  .el-popover .el-popper{
    padding: 0;
  }
  #user---info .el-card__header{
    font-size: 16px;
    background-color: #243247;
    color: #d2d2d2;
    height: 36px;
    line-height: 36px;
    box-sizing: border-box;
    padding: 0 12px;
  }
</style>
<style scoped>
  .f {
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #a0a0a0;
  }

  .f span {
    color: #a0a0a0;
  }
</style>
